<template>
  <div class="__menu__wrapper" id="fasPortalContextMenu"
    style="display:none;width: 160px; top: 219px; left: 247px; --menu-background:#ffffff; --menu-borderRadius:6px; --menu-padding:8px 6px; --menu-boxShadow:0 2px 12px 0 rgba(0,0,0,0.1); --menu-lineColor:#eee; --menu-lineMargin:5px 10px; --menu-item-arrowSize:10px; --menu-item-iconFontSize:18px; --menu-item-labelColor:#5E6370; --menu-item-iconColor:#5E6370; --menu-item-arrowRealSize:5px;">
    <!-- <div class="__menu__item title">
            <div class="__menu__item-icon">
            </div><span class="__menu__item-label"># Verse</span><span class="__menu__item-tips"></span>

        </div> -->
    <div class="__menu__item" @click="eventHanle('add', $event)" v-if="eventObject.hasOwnProperty('add')">
      <div class="__menu__item-icon" ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
          fill="currentColor" height="20" width="20">
          <path d="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z"></path>
        </svg></div><span class="__menu__item-label" :title="Terms.portal.add">{{Terms.portal.add}}</span><span class="__menu__item-tips"
        ></span>
    </div>
    <div class="__menu__item" @click="eventHanle('edit', $event)" v-if="eventObject.hasOwnProperty('edit')">
      <div class="__menu__item-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
          height="18" width="18">
          <path
            d="M16.757 3l-2 2H5v14h14V9.243l2-2V20a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h12.757zm3.728-.9L21.9 3.516l-9.192 9.192-1.412.003-.002-1.417L20.485 2.1z">
          </path>
        </svg></div><span class="__menu__item-label" :title="Terms.portal.edit">{{Terms.contextMenu.edit}}</span><span class="__menu__item-tips"></span>
    </div>

    <div class="__menu__item" @click="eventHanle('mutual', $event)" v-if="eventObject.hasOwnProperty('mutual')">
      <div class="__menu__item-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
          height="18" width="18">
          <path
            d="M6.17 18a3.001 3.001 0 0 1 5.66 0H22v2H11.83a3.001 3.001 0 0 1-5.66 0H2v-2h4.17zm6-7a3.001 3.001 0 0 1 5.66 0H22v2h-4.17a3.001 3.001 0 0 1-5.66 0H2v-2h10.17zm-6-7a3.001 3.001 0 0 1 5.66 0H22v2H11.83a3.001 3.001 0 0 1-5.66 0H2V4h4.17zM9 6a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm6 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-6 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2z">
          </path>
        </svg></div><span class="__menu__item-label" :title="Terms.portal.mutual">{{Terms.contextMenu.mutual}}</span><span class="__menu__item-tips"></span>

    </div>

    <div class="__menu__item" @click="eventHanle('refresh', $event)" v-if="eventObject.hasOwnProperty('refresh')">
      <div class="__menu__item-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
          height="18" width="18">
          <path
            d="M5.463 4.433A9.961 9.961 0 0 1 12 2c5.523 0 10 4.477 10 10 0 2.136-.67 4.116-1.81 5.74L17 12h3A8 8 0 0 0 6.46 6.228l-.997-1.795zm13.074 15.134A9.961 9.961 0 0 1 12 22C6.477 22 2 17.523 2 12c0-2.136.67-4.116 1.81-5.74L7 12H4a8 8 0 0 0 13.54 5.772l.997 1.795z">
          </path>
        </svg></div><span class="__menu__item-label" :title="Terms.portal.refresh">{{Terms.contextMenu.refresh}}</span><span class="__menu__item-tips"></span>
    </div>

    <div class="__menu__item" @click="eventHanle('lock', $event)" v-if="eventObject.hasOwnProperty('lock')">
      <div class="__menu__item-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
          height="18" width="18">
          <path
            d="M19 10h1a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V11a1 1 0 0 1 1-1h1V9a7 7 0 1 1 14 0v1zM5 12v8h14v-8H5zm6 2h2v4h-2v-4zm6-4V9A5 5 0 0 0 7 9v1h10z">
          </path>
        </svg></div><span class="__menu__item-label" :title="Terms.portal.saveEdit">{{Terms.portal.saveEdit}}</span><span class="__menu__item-tips"></span>
    </div>


    <div class="__menu__line" v-if="Object.keys(eventObject).length>1"></div>

    <div class="__menu__item delete" @click="eventHanle('delete', $event)" v-if="eventObject.hasOwnProperty('delete')">
      <div class="__menu__item-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
          height="18" width="18">
          <path
            d="M17 6h5v2h-2v13a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V8H2V6h5V3a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v3zm1 2H6v12h12V8zm-9 3h2v6H9v-6zm4 0h2v6h-2v-6zM9 4v2h6V4H9z">
          </path>
        </svg></div><span class="__menu__item-label" :title="Terms.portal.delete">{{Terms.contextMenu.delete}}</span><span class="__menu__item-tips"></span>
    </div>
    <div class="__menu__item" @click="eventHanle('unlock',$event)" v-if="eventObject.hasOwnProperty('unlock')">
      <div class="__menu__item-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
          height="18" width="18">
          <path
            d="M7 10h13a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V11a1 1 0 0 1 1-1h1V9a7 7 0 0 1 13.262-3.131l-1.789.894A5 5 0 0 0 7 9v1zm-2 2v8h14v-8H5zm5 3h4v2h-4v-2z">
          </path>
        </svg></div><span class="__menu__item-label" :title="Terms.portal.edit">{{Terms.portal.edit}}</span><span class="__menu__item-tips"></span>
    </div>
    <div class="__menu__item" @click="eventHanle('downlock',$event)" v-if="eventObject.hasOwnProperty('downlock')">
      <div class="__menu__item-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
          height="18" width="18">
          <path
            d="M19 10h1a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V11a1 1 0 0 1 1-1h1V9a7 7 0 1 1 14 0v1zM5 12v8h14v-8H5zm6 2h2v4h-2v-4zm6-4V9A5 5 0 0 0 7 9v1h10z">
          </path>
        </svg></div><span class="__menu__item-label" :title="Terms.portal.saveEdit">{{Terms.portal.saveEdit}}</span><span class="__menu__item-tips"></span>
    </div>
  </div>
</template>
<script>
import { Terms } from "./lib/Term";
export default {
    data(){
        return {
          isLayoutBlock:false,
          eventObject:this.lockObject,
          Terms:Terms
        }
    },
    props:['lockObject','isLock','layoutObject'],
    mounted() {
      this.rebind()
    },
    beforeDestroy(){
        //if(this.mouseDownEvent)document.removeEventListener('contextmenu', this.preventMouseMenu)
    },
    methods:{
      rebind() {
        //if(true)return 
        if(!this.layoutContextMenuEvent)
        this.layoutContextMenuEvent = (e) => {

          this.ct = e.currentTarget
          //this.isDocument = false
          e.preventDefault();
          e.stopPropagation()
          if(this.isLock == false){
            //this.eventObject = this.layoutObject
            const { x, y } = e;
            //this.show(x, y);
          }
        };

        if(!this.mouseDownEvent){
          this.mouseDownEvent = (e)=>{
            if(e.button === 2){}else{
              let flag = false
              
              let layout = document.getElementById('fasPortalContextMenu')

              if(layout.contains(e.target)){
                flag = true
              }

              if(flag)return false
              this.close()
            }
          }
          document.addEventListener("mousedown",this.mouseDownEvent)
        }
        
        if(!this.contextMenuEvent)
        this.contextMenuEvent = (e) => {
 
          this.ct = e.currentTarget
    
          this.eventObject = this.lockObject
          e.preventDefault();
          e.stopPropagation()
          console.log("this.isLock========",this.isLock)
          if(this.isLock == false){
            const { x, y } = e;
            this.show(x, y);
          }

          //return false
        };

        let layouts = document.querySelectorAll('.fas_portal_layout')
        let els = document.querySelectorAll('.vue-grid-item')
        layouts.forEach(el => {
          el.removeEventListener('contextmenu', this.layoutContextMenuEvent);
          el.addEventListener('contextmenu', this.layoutContextMenuEvent);
          // el.removeEventListener('mousedown', this.mouseDownEvent);
          // el.addEventListener('mousedown', this.mouseDownEvent);
        })
        els.forEach(el => {
          // el.removeEventListener('contextmenu', this.contextMenuEvent);
          // el.addEventListener('contextmenu', this.contextMenuEvent);
          el.removeEventListener('contextmenu', this.contextMenuEvent);
          el.addEventListener('contextmenu', this.contextMenuEvent);
        })
        document.oncontextmenu = (e) => {
          e.preventDefault();
          this.close()
          return false
        };
        

      },
      eventHanle(evtName,event){
        this.close();
        let func = this.eventObject[evtName]
        if(func){
          func(event,this.ct)
        }
      },
      show(x=0,y=0){
          const { innerWidth: windowWidth, innerHeight: windowHeight } = window;
          const menu = document.querySelector('.__menu__wrapper');
          const menuHeight = menu.offsetHeight;
          const menuWidth = 200;
          let left = x + menuWidth + 1 > windowWidth ? windowWidth - menuWidth - 5 : x + 1;
          let top = y + menuHeight + 1 > windowHeight ? windowHeight - menuHeight - 5 : y + 1;
          menu.style.left = left + 'px'
          menu.style.top = top + 'px'
          menu.style.display='block'
      },
      close(){
          const menu = document.querySelector('.__menu__wrapper');
          menu.style.display='none'
      }
    },
}
</script>
<style scoped>
.__menu__mask {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 999;
}
.__menu__wrapper {
  --menu-background: #c8f2f0;
  --menu-boxShadow: 0 1px 5px #888;
  --menu-padding: 5px 0;
  --menu-borderRadius: 0;
  --menu-item-height: 30px;
  --menu-item-padding: 0 10px;
  --menu-item-iconSize: 20px;
  --menu-item-iconFontSize: 14px;
  --menu-item-iconColor: #484852;
  --menu-item-labelColor: #484852;
  --menu-item-labelFontSize: 14px;
  --menu-item-tipsColor: #889;
  --menu-item-tipsFontSize: 12px;
  --menu-item-arrowColor: #484852;
  --menu-item-disabledColor: #bcc;
  --menu-item-hoverBackground: rgba(255, 255, 255, 0.8);
  --menu-item-hoverIconColor: inherit;
  --menu-item-hoverLabelColor: inherit;
  --menu-item-hoverTipsColor: inherit;
  --menu-item-hoverArrowColor: inherit;
  --menu-lineColor: #ccc;
  --menu-lineMargin: 5px 0;
}
.__menu__wrapper {
  position: fixed;
  width: 200px;
  background: var(--menu-background);
  box-shadow: var(--menu-boxShadow);
  padding: var(--menu-padding);
  border-radius: var(--menu-borderRadius);
  z-index: 99999;
}
.__menu__line,
.__menu__sub__line {
  border-top: 1px solid var(--menu-lineColor);
  margin: var(--menu-lineMargin);
}
.__menu__item,
.__menu__sub__item {
  display: flex;
  height: var(--menu-item-height);
  align-items: center;
  cursor: pointer;
  padding: var(--menu-item-padding);
}
.__menu__item .__menu__item-icon,
.__menu__sub__item .__menu__item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--menu-item-iconColor);
  width: var(--menu-item-iconSize);
  height: var(--menu-item-iconSize);
}
.__menu__item .__menu__item-icon i,
.__menu__sub__item .__menu__item-icon i {
  font-size: var(--menu-item-iconFontSize);
}
.__menu__item .__menu__item-icon .__menu__item-icon-svg,
.__menu__sub__item .__menu__item-icon .__menu__item-icon-svg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.__menu__item .__menu__item-label,
.__menu__item .__menu__sub__item-label,
.__menu__sub__item .__menu__item-label,
.__menu__sub__item .__menu__sub__item-label {
  width: 100%;
  max-height: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  font-size: var(--menu-item-labelFontSize);
  color: var(--menu-item-labelColor);
  margin-right: 5px;
  overflow: hidden;
}
.__menu__item .__menu__item-tips,
.__menu__item .__menu__sub__item-tips,
.__menu__sub__item .__menu__item-tips,
.__menu__sub__item .__menu__sub__item-tips {
  font-size: var(--menu-item-tipsFontSize);
  color: var(--menu-item-tipsColor);
}
.__menu__item .__menu__item-arrow,
.__menu__sub__item .__menu__item-arrow {
  width: 10px;
  height: 10px;
  margin-left: 5px;
  position: relative;
}
.__menu__item.disabled,
.__menu__sub__item.disabled {
  cursor: not-allowed;
}
.__menu__item.disabled .__menu__item-icon,
.__menu__item.disabled .__menu__item-label,
.__menu__item.disabled .__menu__sub__item-label,
.__menu__item.disabled .__menu__item-tips,
.__menu__item.disabled .__menu__sub__item-tips,
.__menu__sub__item.disabled .__menu__item-icon,
.__menu__sub__item.disabled .__menu__item-label,
.__menu__sub__item.disabled .__menu__sub__item-label,
.__menu__sub__item.disabled .__menu__item-tips,
.__menu__sub__item.disabled .__menu__sub__item-tips {
  color: var(--menu-item-disabledColor);
}
.__menu__item.disabled .__menu__item-arrow .__menu__item-arrow-after,
.__menu__sub__item.disabled .__menu__item-arrow .__menu__item-arrow-after {
  border-left: var(--menu-item-arrowRealSize) solid var(--menu-item-disabledColor);
}
.__menu__item:not(.disabled):hover {
  background: var(--menu-item-hoverBackground);
}
.__menu__item:not(.disabled):hover .__menu__item-icon {
  color: var(--menu-item-hoverIconColor);
}
.__menu__item:not(.disabled):hover .__menu__item-label {
  color: var(--menu-item-hoverLabelColor);
}
.__menu__item:not(.disabled):hover .__menu__item-tips {
  color: var(--menu-item-hoverTipsColor);
}
.__menu__item:not(.disabled):hover .__menu__item-arrow {
  color: var(--menu-item-hoverArrowColor);
}
.__menu__sub__item:not(.disabled):hover {
  background: var(--menu-item-hoverBackground);
}
.__menu__sub__item:not(.disabled):hover .__menu__sub__item-label {
  color: var(--menu-item-hoverLabelColor);
}
.__menu__sub__item:not(.disabled):hover .__menu__sub__item-tips {
  color: var(--menu-item-hoverTipsColor);
}
.__menu__item-icon {
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  margin-right: 4px;
}
.__menu__item-arrow.show .__menu__item-arrow-after {
  position: absolute;
  width: 0;
  height: 0;
  left: 8px;
  border-left: var(--menu-item-arrowRealSize) solid var(--menu-item-arrowColor);
  border-top: var(--menu-item-arrowRealSize) solid transparent;
  border-bottom: var(--menu-item-arrowRealSize) solid transparent;
}
.__menu__sub__wrapper {
  position: fixed;
  visibility: hidden;
  width: 200px;
  background: var(--menu-background);
  box-shadow: var(--menu-boxShadow);
  padding: var(--menu-padding);
  border-radius: var(--menu-borderRadius);
}
.__menu__item:hover .__menu__sub__wrapper {
  visibility: visible;
}
</style>